<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>用户角色列表</title>
	<link href="${basePath }/static/plugins/layui/css/layui.css" rel="stylesheet"/>
	<link href="${basePath}/static/build/css/app.css" rel="stylesheet" media="all">
</head>
<body>
<div class="" id="userRole-main" style="margin: 12px;">
	<div class="layui-row">
		<div class="layui-col-xs8">
			<div class="layui-btn-group " id="toolbar">
				<button title="删除" class="layui-btn layui-btn-primary" data-type="deleteBatch"><i class="layui-icon">&#xe640;</i></button>
				<button title="刷新" class="layui-btn layui-btn-primary" data-type="refresh"><i class="layui-icon">&#x1002;</i></button>
				<button title="新增" class="layui-btn layui-btn-primary" data-type="toInsert"><i class="layui-icon">&#xe61f;</i></button>
			</div>
		</div>
		<div class="layui-col-xs4">
			<div id="search-inputs"></div>
		</div>
	</div>
	<div id="table" lay-filter="userRole-table"></div>
</div>

<script src="${basePath }/static/plugins/layui/layui.js"></script>
<script src="${basePath }/static/plugins/jq/jquery-2.2.4.min.js"></script>
<script src="${basePath }/static/build/js/common.js"></script>
<script>
    layui.use(['form', 'table', 'layer', 'element', 'search'], function() {
        var form = layui.form,
            table = layui.table,
            layer = layui.layer,
            search = layui.search;


        var tableIns = table.render({
            elem: '#userRole-main #table'
			,id: 'userRole-table'
            ,height: 'full'
            ,url: '${basePath}/power/userRole/query' //数据接口
            ,page: true //开启分页
            ,limit: 10
            ,cols: [[ //表头
                {type: 'checkbox', width: 50}
                ,{field: 'id', title: 'ID', sort: true}
                ,{field: 'username', title: '用户名', edit: 'text'}
                ,{field: 'roleName', title: '角色名', edit: 'text'}
                ,{field: 'updateTime', title: '更新时间',
                    templet: function (item) {
						return getDateFromMill(item.updateTime);
                    }
				}
                ,{fixed: 'right', width:140, align:'center', toolbar: '#commont-bar'}
            ]]
        });

        //初始化检索组件
        search.render({
            tableIns: tableIns,  //表格对象，必须
            elem: '#search-inputs',  //搜索的div的id或class，必须
            searchName: 'param',  //模糊查询文本框的name
            placeholder: '模糊查询',
            more: false,  //是否需要更多筛选，可选，默认为true，true/false
            init: function(){
                console.log('初始化后的回调函数');
            },
            onInputChange: function (data) {
                console.log('模糊查询文本框文字改变事件')
                console.log(data);
            },
            onInputSubmit: function (data) {
                console.log('模糊查询按钮点击事件');
                console.log(data);
            },
            onInputEnter: function (data) {
                console.log('模糊查询文本框enter事件');
                console.log(data);
            },
            onMoreShow: function(){
                console.log('更多筛选显示后的回调函数')
            },
            onMoreHide: function(){
                console.log('更多筛选隐藏后的回调函数')
            },
            onMoreSubmit: function (data) {
                console.log('更多筛选确认后的回调函数')
                console.log(data);
            },
            onMoreReset: function (data) {
                console.log('更多筛选重置后的回调函数')
                console.log(data);
            }
        });

        //监听单元格编辑
        table.on('edit(userRole-table)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            var reqData = {};
            reqData[field] = value;
            reqData['userRoleId'] = data.userRoleId;
            action.update(reqData);
        });

        table.on('tool(userRole-table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if(layEvent === 'top'){ //置顶
                layer.msg('开发中...');
            } else if(layEvent === 'del'){ //删除
                layer.confirm('是否确认删除', function(index){
                    obj.del();
                    var id = [data.userRoleId];
                    action.delete(id);
                    layer.close(index);
                });
            }
        });

        var action = {
            deleteBatch: function(){ //批量删除
                var checkStatus = table.checkStatus('userRole-table')
                    ,data = checkStatus.data;
                if(data.length == 0){
                    return;
                }
                var ids = [];
                for(var i = 0; i < data.length; i++ ){
                    ids.push(data[i].userRoleId);
                }

                action.delete(ids);
                tableIns.reload();
            },
            refresh: function(){
                tableIns.reload();
            },
            toInsert: function(){
                var options = {
                    url: "${basePath }/power/userRole/toinsert",
                    icon: "&#xe658;",
                    title: "新增用户角色",
                    id: "userRole-insert"
                }
                parent.tab.tabAdd(options);
            },
            delete: function(ids){
                $.ajax({
                    url: '${basePath}/power/userRole/delete',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: ids
                    },
                    success: function(resp){
                        if(resp.code==10000){
                            layer.msg('删除成功',{
                                time: 1000
                            }, function(){
                                //tableIns.reload();
                            })
                        }
                    }
                })
            },
            update: function(reqData){
                $.ajax({
                    url: '${basePath}/power/userRole/update',
                    type: 'post',
                    dataType: 'json',
                    data:reqData,
                    success: function(resp){
                        console.log(resp)
                        if(resp.code==10000){
                            layer.msg('更新成功',{
                                time: 1000
                            });
                        }
                    }
                })
            }
        };

        $('#userRole-main #toolbar .layui-btn').on('click', function(){
            var type = $(this).data('type');
            action[type] ? action[type].call(this) : '';
        });

        action.refresh();
    });


</script>
<script type="text/html" id="commont-bar">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>